import { useRoutes,Navigate,NavLink,useNavigate,Outlet  } from "react-router-dom";

function Home() {
    return (
      <>
        <main>
          <h2>Welcome to the homepage!</h2>
          <p>You can do this, I believe in you.</p>
        </main>
        <nav>
          <NavLink
            to="/about"
            className={({ isActive }) => (isActive ? activeClassName : undefined)}
          >
            About
          </NavLink>
        </nav>
      </>
    );
  }
  
  function About() {
    const navigate = useNavigate();
    const handelClickToHome = () => {
      navigate("/");
    };
  
    const handelClickToChild = () => {
      navigate("/about/child");
    };
    return (
      <>
        <main>
          <h2>Who are we?</h2>
          <p>That feels like an existential question, don't you think?</p>
        </main>
        <button onClick={handelClickToChild}>嵌套路由</button>
        {/* 定义子路由的显示位置 */}
        <Outlet/>
          <button onClick={handelClickToHome}>Home</button>
      </>
    );
  }

  function AboutChild() {
    return (
      <>
        <h2>Hello AboutChild</h2>
      </>
    );
  }
  

const routers = [
    {
        path:"/",
        element:<Home/>
    },
    {
        path:"/about",
        element:<About/>,
        children:[
            {
                path:"/about",
                element:<AboutChild/>
            }
        ]
    },
    {
        path:"*",
        element:<Navigate to="/"/>
    },
]


export default function App(){
    const element = useRoutes(routers)
    return (
        <>
        {element}
        </>
    )
}